import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';

import BasePage from '../common/BasePage';
import SizeUtils from '../../common/SizeUtils';
import HeartConstants from '../../common/HeartConstants';
import Config from '../../config';


const LINE_NUMBER = 4;

export default class HeartLoveTagEditPage extends BasePage {
  constructor(props) {
    super(props);

    this._initSelectedTags();
    this._update = false;
    this.state.updateDataMark = 0;
  }

  _initSelectedTags() {
    if(this.props.pageData.routeData.loveData) {
      this._selectedTags = this.props.pageData.routeData.loveData.tags_list;
    }
    if(this._selectedTags == undefined) {
      this._selectedTags = [];
    }
  }

  _dealEnterPage() {
    this._initSelectedTags();
  }

  render() {
    return(
      <View style={{flex:1, paddingTop:Config.paddingTop, backgroundColor:"#ffffff"}}>
        {this._renderTitle()}
        {this._renderSelectItems()}
        {this._renderSubmitButton()}
        {this._renderNavigationBar()}
      </View>
    )
  }

  _renderSubmitButton() {
    if(this._getIsSelf() === false) {
      return null;
    }
    return (
      <TouchableOpacity style={{position:"absolute", bottom:0, width:SizeUtils.getWindowSize().width,
          height:SizeUtils.translateDesignHeightToCode(100), backgroundColor:this._checkSubmitBtnDisabled() ? "#666666" : "#db3132",
          justifyContent:"center", alignItems:"center", }} disabled={this._checkSubmitBtnDisabled()}
          onPress={this._onPressSubmit.bind(this)}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(36), color:"#ffffff"}}>{this._getSubmitButtonText()}</Text>
      </TouchableOpacity>
    )
  }

  _onPressSubmit() {
    this.props.pageData.routeData.loveData.tags_list = this._selectedTags;
    this.props.pageData.routeData.callback();
    this.goBack();
  }

  _getSubmitButtonText() {
    let text = "";
    if(this._selectedTags.length < 3) {
      text = "请至少选择三个兴趣";
    }
    else {
      text = "保 存";
    }
    return text;
  }

  _checkSubmitBtnDisabled() {
    return this._selectedTags.length < 3 || this._update == false;
  }

  _renderTitle() {
    return (
      <View style={{flexDirection:"column", height:SizeUtils.translateDesignHeightToCode(100),
          paddingTop:SizeUtils.translateDesignHeightToCode(30)}}>
        <Text style={{color:"#333333", fontSize:SizeUtils.translateFontSizeToCode(36), textAlign:"center"}}>
          {this._getIsSelf() ? "选择你的标签" : "他/她的标签"}
        </Text>
        <Text style={{color:"#999999", fontSize:SizeUtils.translateFontSizeToCode(26), paddingTop:SizeUtils.translateDesignHeightToCode(24),
            textAlign:"center"}}>
          {this._getIsSelf() ? "让你的她/他，快速认识你" : ""}
        </Text>
      </View>
    )
  }

  _getIsSelf() {
    return !this.props.pageData.routeData.others === true;
  }

  _renderSelectItems() {
    let tagConstants = HeartConstants.totalData.tags_list.params;
    let tagArrs = [];
    let tempArr = [];
    for (var i = 0; i < tagConstants.length; i++) {
      if(tempArr.length < LINE_NUMBER) {
        tempArr.push(tagConstants[i]);
      }
      else {
        tagArrs.push(tempArr);
        tempArr = [tagConstants[i]];
      }
    }
    return (
      <View style={{flexDirection:"column", paddingLeft:SizeUtils.translateDesignWidthToCode(40),
          paddingRight:SizeUtils.translateDesignWidthToCode(40),
          paddingTop:SizeUtils.translateDesignHeightToCode(100)}}>
         {tagArrs.map(
           (lineArr, indexBig) => {
             return this._renderSelectItemLine(lineArr, indexBig);
           }
         )}
      </View>
    )
  }

  _renderSelectItemLine(lineArr, indexBig) {
    return (
      <View key={indexBig} style={{flexDirection:"row", justifyContent:"space-around",
          paddingBottom:SizeUtils.translateDesignHeightToCode(46)}}>
        {lineArr.map(
          (tag, index) => {
            return this._renderSelectItem(tag, indexBig * 4 + index + 1);
          }
        )}
      </View>
    )
  }

  _renderSelectItem(tag, index) {
    return (
      <TouchableOpacity key={index} style={{width:SizeUtils.translateDesignWidthToCode(133),
        height:SizeUtils.translateDesignWidthToCode(133),
        flexDirection:"row", alignItems:"center", justifyContent:"center",
        borderRadius:SizeUtils.translateDesignNumToCode(30),
        borderWidth:SizeUtils.translateDesignNumToCode(3), borderColor:"#db3132",
        backgroundColor:this._getItemBackgroundColor(tag, index)}} onPress={() => this._onPressItem(tag, index)}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:this._getColor(tag, index)}}>
          {tag}
        </Text>
      </TouchableOpacity>
    )
  }

  _getItemBackgroundColor(tag ,index) {
    let currentIndex = this._selectedTags.indexOf(index);
    if(currentIndex < 0) {
      return "#ffffff";
    }
    else {
      return "#db3132";
    }
  }

  _onPressItem(tag, index) {
    if(this._getIsSelf() === false) {
      return;
    }
    this._update = true;
    let currentIndex = this._selectedTags.indexOf(index);
    if(currentIndex >= 0) {
      this._selectedTags.splice(currentIndex, 1);
    }
    else {
      this._selectedTags.push(index);
    }
    this.setState({
      updateDataMark:this.state.updateDataMark + 1,
    })
  }

  _getColor(tag, index) {
    let currentIndex = this._selectedTags.indexOf(index);
    if(currentIndex < 0) {
      return "#db3132";
    }
    else {
      return "#ffffff";
    }
  }
}
